<template>
    <view class="screen_content">
      <image src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/static%2Fscreen.jpg" mode="widthFix" class="bg_box" />
      <!-- <image class="bg_box" :src="base+'/profile/fault_photo/2024/07/01/3aab50343059471e90b49a3369c0fa4c.jpg'" mode="widthFix" /> -->
      <view class="content_box">
        <view class="title_box">
          <text style="font-size: 50rpx; font-weight: 700">您好，###</text>
          <view class="back_box" @click="back">
            <image
              :src="base+'/profile/farm_photo/2024/06/14/logout_20240614152431A015.png'"
              style="width: 60rpx; height: 60rpx"
              mode=""
            />
            <text style="font-size: 28rpx">返 回</text>
          </view>
        </view>
        <view style="font-size: 40rpx">您已加入该系统368天</view>
        <view class="charts-box">
          <view style="width: 50%;height: 100%">
            <qiun-data-charts type="arcbar" :opts="optsOne" :chartData="chartOne" />
          </view>
          <view class="legend_box">
            <view class="legend_box_title1">生产处理情况</view>
            <view class="legend_item1">
              <view class="color_item"></view>
              <view class="title_item">牛粪</view>
            </view>
            <view class="legend_con">
              <text>已处理500t</text>
              <text>未处理500t</text>
            </view>
            <view class="legend_item1" style="margin-top: 30rpx">
              <view class="color_item" style="background-color: #30bdca"></view>
              <view class="title_item">污水</view>
            </view>
            <view class="legend_con">
              <text>已处理500t</text>
              <text>未处理500t</text>
            </view>
          </view>
        </view>
        <view class="two_box">
          <view class="charts-box2">
            <view style="width: 100%;height: 60%">
              <qiun-data-charts type="ring" :opts="optsTwo" :chartData="chartTwo" />
            </view>
            <view class="legend_box2">
              <view class="legend_item2">
                <view style="display: flex;align-items: center;">
                  <view class="color_box2"></view>
                  <view style="font-size: 24rpx">正常人数87</view>
                </view>
                <view class="flex_end_box">
                  <view style="font-size: 36rpx">60</view>
                  <view style="font-size: 18rpx;margin-left: 4rpx">%</view>
                </view>
              </view>
              <view class="legend_item2">
                <view style="display: flex;align-items: center;">
                  <view class="color_box2" style="background-color: #57beb5"></view>
                  <view style="font-size: 24rpx">请假人数87</view>
                </view>
                <view class="flex_end_box">
                  <view style="font-size: 36rpx">60</view>
                  <view style="font-size: 18rpx;margin-left: 4rpx">%</view>
                </view>
              </view>
              <view class="legend_item2">
                <view style="display: flex;align-items: center;">
                  <view class="color_box2" style="background-color: #ea334b"></view>
                  <view style="font-size: 24rpx">休班人数87</view>
                </view>
                <view class="flex_end_box">
                  <view style="font-size: 36rpx">60</view>
                  <view style="font-size: 18rpx;margin-left: 4rpx">%</view>
                </view>
              </view>
            </view>
          </view>
          <view class="charts-box2">
            <view style="width: 100%;height: 60%">
              <qiun-data-charts type="ring" :opts="optsThree" :chartData="chartTwo" />
            </view>
            <view class="legend_box2">
              <view class="legend_item2">
                <view style="display: flex;align-items: center;">
                  <view class="color_box2"></view>
                  <view style="font-size: 24rpx">运行中87</view>
                </view>
                <view class="flex_end_box">
                  <view style="font-size: 36rpx">60</view>
                  <view style="font-size: 18rpx;margin-left: 4rpx">%</view>
                </view>
              </view>
              <view class="legend_item2">
                <view style="display: flex;align-items: center;">
                  <view class="color_box2" style="background-color: #57beb5"></view>
                  <view style="font-size: 24rpx">待机中87</view>
                </view>
                <view class="flex_end_box">
                  <view style="font-size: 36rpx">60</view>
                  <view style="font-size: 18rpx;margin-left: 4rpx">%</view>
                </view>
              </view>
              <view class="legend_item2">
                <view style="display: flex;align-items: center;">
                  <view class="color_box2" style="background-color: #ea334b"></view>
                  <view style="font-size: 24rpx">故障87</view>
                </view>
                <view class="flex_end_box">
                  <view style="font-size: 36rpx">60</view>
                  <view style="font-size: 18rpx;margin-left: 4rpx">%</view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="charts-box4">
          <view style="width: 50%;height: 100%">
            <qiun-data-charts type="pie" :opts="optsFour" :chartData="chartFour" />
          </view>
          <view class="legend_box4">
            <view class="legend_title4">耗电量主要分布情况</view>
            <view class="legend_item4">
              <view class="color_box4"></view>
              <view>牛粪处理1200KWh</view>
            </view>
            <view class="legend_item4">
              <view class="color_box4" style="background-color: #5cc8be"></view>
              <view>污水处理900KWh</view>
            </view>
            <view class="legend_item4">
              <view class="color_box4" style="background-color: #af53de"></view>
              <view>XX处理600KWh</view>
            </view>
            <view class="legend_item4">
              <view class="color_box4" style="background-color: #5856d6"></view>
              <view>其他400KWh</view>
            </view>
          </view>
        </view>
        <view class="liquid_box">
          <view class="li_box">
            <l-liquid class="bg" :style="{'--size': screenWidth <= 360 ? '80px' : '125px'}" :current="modelVale" :percent="target" background="#232324" waveColor="#bfbb3f">
              <text style="font-size: 48rpx">{{modelVale}}%</text>
            </l-liquid>
            <view>
              <view style="margin: 20rpx 0;">设备维修</view>
              <view>99/103</view>
            </view>
          </view>
          <view class="li_box">
            <l-liquid class="bg" :style="{'--size': screenWidth <= 360 ? '80px' : '125px'}" :current="modelVale" :percent="target" background="#232324" waveColor="#3691db">
              <text style="font-size: 48rpx">{{modelVale}}%</text>
            </l-liquid>
            <view>
              <view style="margin: 20rpx 0;">设备巡检</view>
              <view>99/103</view>
            </view>
          </view>
          <view class="li_box">
            <l-liquid class="bg" :style="{'--size': screenWidth <= 360 ? '80px' : '125px'}" :current="modelVale" :percent="target" background="#232324" waveColor="#3bcfaa">
              <text style="font-size: 48rpx">{{modelVale}}%</text>
            </l-liquid>
            <view>
              <view style="margin: 20rpx 0;">答题完成</view>
              <view>99/103</view>
            </view>
          </view>
        </view>
        
        <view class="charts-box4">
          <view style="width: 50%;height: 100%">
            <qiun-data-charts type="pie" :opts="optsFour" :chartData="chartFour" />
          </view>
          <view class="legend_box4">
            <view class="legend_title4">沼气成分分析</view>
            <view class="legend_item4">
              <view class="color_box4"></view>
              <view>甲烷60%</view>
            </view>
            <view class="legend_item4">
              <view class="color_box4" style="background-color: #5cc8be"></view>
              <view>二氧化碳25%</view>
            </view>
            <view class="legend_item4">
              <view class="color_box4" style="background-color: #af53de"></view>
              <view>硫化氢10%</view>
            </view>
            <view class="legend_item4">
              <view class="color_box4" style="background-color: #5856d6"></view>
              <view>其他5%</view>
            </view>
          </view>
        </view>
        <view class="charts-box4">
          <view style="width: 50%;height: 100%">
            <qiun-data-charts type="pie" :opts="optsFour" :chartData="chartFour" />
          </view>
          <view class="legend_box4">
            <view class="legend_title4">实时流量数据</view>
            <view class="legend_item4">
              <view class="color_box4"></view>
              <view>XXXXX1000m³/h</view>
            </view>
            <view class="legend_item4">
              <view class="color_box4" style="background-color: #5cc8be"></view>
              <view>XXXXX1000m³/h</view>
            </view>
            <view class="legend_item4">
              <view class="color_box4" style="background-color: #af53de"></view>
              <view>XXXXX1000m³/h</view>
            </view>
            <view class="legend_item4">
              <view class="color_box4" style="background-color: #5856d6"></view>
              <view>XXXXX1000m³/h</view>
            </view>
          </view>
        </view>
        <view class="charts-box4">
          <view style="width: 50%;height: 100%">
            <qiun-data-charts type="ring" :opts="optsTen" :chartData="chartTen" />
          </view>
          <view class="legend_box4">
            <view class="legend_title4" style="margin-bottom: 10rpx">发电效率</view>
            <view>18kwh/m³</view>
            <view style="margin-bottom: 60rpx">38.5%</view>
            <view class="legend_item4">
              <view class="color_box4" style="background-color: #f09436"></view>
              <view>发电用电：1680，58%</view>
            </view>
            <view class="legend_item4">
              <view class="color_box4" style="background-color: #2b2b2b"></view>
              <view>电网用电：1235，42%</view>
            </view>
          </view>
        </view>
        <view class="charts-box4">
          <view style="width: 50%;height: 100%">
            <qiun-data-charts type="ring" :opts="optsEleven" :chartData="chartEleven" />
          </view>
          <view class="legend_box4">
            <view class="legend_title4" style="margin-bottom: 10rpx">发电效率</view>
            <view>18kwh/m³</view>
            <view style="margin-bottom: 60rpx">38.5%</view>
            <view class="legend_item4">
              <view class="color_box4" style="background-color: #f09436"></view>
              <view>发电用电：1680，58%</view>
            </view>
            <view class="legend_item4">
              <view class="color_box4" style="background-color: #2b2b2b"></view>
              <view>电网用电：1235，42%</view>
            </view>
          </view>
        </view>
        <view class="tip_box">
          <view class="tip_ball">
            <view class="ball_box">
              <view class="ball_content">
                <view class="num_box">
                  <text style="font-size: 80rpx;font-weight: 700">0</text>
                  <text>次</text>
                </view>
                <view class="text_box">今日报警数</view>
              </view>
            </view>
          </view>
          <view class="tip_content">
            <view class="legend_title4" style="margin-bottom: 10rpx">安全提示</view>
            <view class="tip_content_box">
              <view class="green_line"></view>
              <view class="content_bg_box">
                <view class="con_item">今日报警数：0</view>
                <view class="con_item">本周报警数：2</view>
                <view class="con_item">本月报警数：3</view>
                <view class="con_item">累计报警数：12</view>
              </view>
            </view>
          </view>
        </view>
        <view class="seven_day_title">最近七天处理量情况</view>
        <view class="seven_day">
          <qiun-data-charts 
            type="area"
            :opts="optsEnd"
            :chartData="chartEnd"
          />
        </view>
        <view class="seven_legend">
          <view class="seven_item">
            <view class="color_box"></view>
            <view>牛粪</view>
          </view>
          <view class="seven_item">
            <view class="color_box" style="background-color:#baf172"></view>
            <view>污水</view>
          </view>
        </view>
        <view class="emission_index">
          <text style="font-weight: 700">排放水指标</text>
          <text>COD</text>
          <text>NH3</text>
          <text>##</text>
        </view>
        <view class="emission_index">
          <text style="font-weight: 700">烟气排放指标</text>
          <text>PPM</text>
          <text>SO2</text>
          <text>##</text>
        </view>
      </view>
    </view>
  </template>
  <script>
  import lLiquid from '@/pagesScreen/subpackageuni/lime-liquid/components/l-liquid/l-liquid.vue'
  import qiunDataCharts from '@/pagesScreen/subpackageuni/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
  export default {
    components: {
      lLiquid,
      qiunDataCharts
    },
    onLoad(args) {
      this.getScreenSize()
    },
    onShow() {},
    onReady() {
      // this.getServerOne();
    },
    data() {
      return {
        screenWidth: 0,
        chartOne: {
          series: [
            {
              name: "一班",
              data: 0.9,
            },
            {
              name: "二班",
              data: 0.8,
            },
          ],
        },
        optsOne: {
          color: ["#fdc952", "#30bdca"],
          padding: [5, 200, 5, 5],
          title: "",
          subtitle: {
            name: "",
          },
          legend: {
            show: true,
            position: "right",
            lineHeight: 25,
          },
          extra: {
            arcbar: {
              type: "circle",
              width: 12,
              backgroundColor: "#093a1e",
              startAngle: 1.5,
              endAngle: 0.25,
              gap: 2,
            },
            ring: {
              offsetAngle: -90,
            },
          },
        },
        chartTwo: {
          series: [
            {
              data: [
                { name: "一班", value: 50, labelShow: false },
                { name: "二班", value: 30, labelShow: false },
                { name: "三班", value: 20, labelShow: false },
              ],
            },
          ],
        },
        target: 70,
        modelVale: 70,
        optsTwo: {
          rotate: false,
          rotateLock: false,
          color: [
            "#019cff",
            "#57beb5",
            "#ea334b",
          ],
          // padding: [5, 5, 5, 5],
          dataLabel: false,
          enableScroll: false,
          legend: {
            show: false,
            position: "bottom",
            lineHeight: 25,
            itemGap: 100,
          },
          title: {
            name: "员工考勤情况",
            fontSize: 14,
            color: "#fff",
            float: "left",
          },
          subtitle: {
            name: "",
          },
          background: "rgba(0,0,0,0)",
          extra: {
            ring: {
              centerColor: "#0e390a",
              ringWidth: 20,
              activeOpacity: 0.5,
              activeRadius: 10,
              offsetAngle: 0,
              labelWidth: 15,
              border: false,
              // borderColor: "#FFFFFF",
              customRadius: 70,
            },
          },
        },
        optsThree: {
          rotate: false,
          rotateLock: false,
          color: [
            "#019cff",
            "#57beb5",
            "#ea334b",
          ],
          // padding: [5, 5, 5, 5],
          dataLabel: false,
          enableScroll: false,
          legend: {
            show: false,
            position: "bottom",
            lineHeight: 25,
            itemGap: 100,
          },
          title: {
            name: "设备运行情况",
            fontSize: 14,
            color: "#fff",
            float: "left",
          },
          subtitle: {
            name: "",
          },
          background: "rgba(0,0,0,0)",
          extra: {
            ring: {
              centerColor: "#0e390a",
              ringWidth: 20,
              activeOpacity: 0.5,
              activeRadius: 10,
              offsetAngle: 0,
              labelWidth: 15,
              border: false,
              // borderColor: "#FFFFFF",
              customRadius: 70,
            },
          },
        },
        chartFour: {
          series: [
            {
              data: [
                { name: "一班", value: 50, labelShow: false },
                { name: "二班", value: 30, labelShow: false },
                { name: "三班", value: 20, labelShow: false },
                { name: "四班", value: 18, labelShow: false },
              ],
            },
          ],
        },
        optsFour: {
          color: [
            "#019cff",
            "#5cc8be",
            "#af53de",
            "#5856d6",
            "#73C0DE",
            "#3CA272",
            "#FC8452",
            "#9A60B4",
            "#ea7ccc",
          ],
          enableScroll: false,
          legend: {
            show: false,
            position: "right",
            lineHeight: 25,
            itemGap: 100,
          },
          extra: {
            pie: {
              activeOpacity: 0.5,
              activeRadius: 10,
              offsetAngle: 0,
              labelWidth: 15,
              border: true,
              borderWidth: 3,
              customRadius: 70,
              borderColor: "#FFFFFF",
            },
          },
        },
        chartTen: {
          series: [
            {
              data: [
                { name: "一班", value: 75, labelShow: false },
                { name: "二班", value: 25, labelShow: false },
              ],
            },
          ],
        },
        optsTen: {
          rotate: false,
          rotateLock: false,
          color: [
            "#ffb300",
            "#2b2b2b",
          ],
          // padding: [5, 5, 5, 5],
          dataLabel: false,
          enableScroll: false,
          legend: {
            show: false,
            position: "bottom",
            lineHeight: 25,
            itemGap: 100,
          },
          title: {
            name: "发电机1#负载",
            fontSize: 12,
            color: "#fff",
            offsetY: -10,
          },
          subtitle: {
            name: "100%",
            fontSize: 20,
            color: "#fff",
          },
          background: "rgba(0,0,0,0)",
          extra: {
            ring: {
              centerColor: "#0e390a",
              ringWidth: 20,
              activeOpacity: 0.5,
              activeRadius: 10,
              offsetAngle: 0,
              border: true,
              borderColor: "#FFFFFF",
              customRadius: 70,
            },
          },
        },
        chartEleven: {
          series: [
            {
              data: [
                { name: "一班", value: 75, labelShow: false },
                { name: "二班", value: 25, labelShow: false },
              ],
            },
          ],
        },
        optsEleven: {
          rotate: false,
          rotateLock: false,
          color: [
            "#ffb300",
            "#2b2b2b",
          ],
          // padding: [5, 5, 5, 5],
          dataLabel: false,
          enableScroll: false,
          legend: {
            show: false,
            position: "bottom",
            lineHeight: 25,
            itemGap: 100,
          },
          title: {
            name: "发电机2#负载",
            fontSize: 12,
            color: "#fff",
            offsetY: -10,
          },
          subtitle: {
            name: "100%",
            fontSize: 20,
            color: "#fff",
          },
          background: "rgba(0,0,0,0)",
          extra: {
            ring: {
              centerColor: "#0e390a",
              ringWidth: 20,
              activeOpacity: 0.5,
              activeRadius: 10,
              offsetAngle: 0,
              border: true,
              borderColor: "#FFFFFF",
              customRadius: 70,
            },
          },
        },
        chartEnd: {
          categories: ["0314","0315","0316","0317","0318","0319","0320"],
          series: [
            {
              name: "牛粪",
              data: [35,8,25,37,4,20, 22]
            },
            {
              name: "污水",
              data: [70,40,65,100,44,68, 50]
            },
          ]
        },
        optsEnd: {
          color: ["#af53de","#baf172"],
          padding: [15,0,0,0],
          enableScroll: false,
          legend: {
            show: false
          },
          xAxis: {
            disableGrid: false,
          },
          yAxis: {
            gridType: "dash",
            dashLength: 2
          },
          extra: {
            area: {
              type: "curve",
              opacity: 0.2,
              addLine: true,
              width: 2,
              gradient: true,
              activeType: "none"
            }
          }
        }
      };
    },
    methods: {
      back () {
        uni.redirectTo({
            url:'/pagesPlant/index/feature'
        })
      },
      getScreenSize() {
        uni.getSystemInfo({
          success: (res) => {
            this.screenWidth = res.windowWidth; // 屏幕宽度，单位为px
            console.log('屏幕宽度：', this.screenWidth);
            let customRadius = 0
            if (res.windowWidth <= 320) {
              customRadius = 60
            } else if (res.windowWidth >= 390 && res.windowWidth < 500) {
              customRadius = 70
            } else if (res.windowWidth >= 500) {
              customRadius = 100
            } else {
              customRadius = 60
            }
            this.optsTwo.extra.ring.customRadius = customRadius
            this.optsThree.extra.ring.customRadius = customRadius
            this.optsTen.extra.ring.customRadius = customRadius
            this.optsEleven.extra.ring.customRadius = customRadius
            this.optsFour.extra.pie.customRadius = customRadius
          },
        });
      },
    },
  };
  </script>
  <style lang="scss" scoped>
  .bg {
      --l-liquid-bg-color: #232324;
    --l-liquid-size: var(--size);
  }
  .screen_content {
    width: 100vw;
    height: 100vh;
    position: relative;
    .bg_box {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }
    .content_box {
      position: absolute;
      width: 100%;
      color: #fff;
      top: 80rpx;
      box-sizing: border-box;
      padding: 20rpx;
      left: 0;
      z-index: 1;
      .title_box {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        margin-bottom: 20rpx;
        .back_box {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
        }
      }
    }
  }
  .charts-box {
    margin-top: 80rpx;
    width: 100%;
    height: 320rpx;
    display: flex;
    .legend_box {
      width: 50%;
      color: #fff;
      .legend_box_title1 {
        font-weight: 700;
        font-size: 40rpx;
        margin-bottom: 30rpx;
      }
      .legend_item1 {
        display: flex;
        align-items: center;
        font-weight: 700;
        margin-bottom: 20rpx;
        font-size: 24rpx;
        .color_item {
          background-color: #fecb55;
          width: 16rpx;
          height: 40rpx;
          border-radius: 16rpx;
          margin-right: 20rpx;
        }
      }
      .legend_con {
        font-size: 24rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
  .two_box {
    width: 100%;
    height: 500rpx;
    margin-top: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .charts-box2 {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .legend_box2 {
      width: 100%;
      box-sizing: border-box;
      .legend_item2 {
        display: flex;
        padding: 10rpx 30rpx;
        align-items: center;
        justify-content: space-between;
        .color_box2 {
          background-color: #1890ff;
          width: 10rpx;
          height: 40rpx;
          border-radius: 10rpx;
          margin-right: 10rpx;
        }
        .flex_end_box {
          display: flex;
          align-items: flex-end;
        }
      }
    }
  }
  .charts-box4 {
    width: 100%;
    height: 340rpx;
    margin-top: 80rpx;
    display: flex;
    .legend_box4 {
      width: 50%;
      height: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: start;
      flex-direction: column;
      color: #fff;
      .legend_title4 {
        font-size: 34rpx;
        font-weight: 700;
        margin-bottom: 20rpx;
      }
      .legend_item4 {
        padding: 10rpx 20rpx;
        background-color: #196B21;
        border-radius: 8rpx;
        display: flex;
        font-size: 24rpx;
        align-items: center;
        margin-bottom: 10rpx;
        .color_box4 {
          width: 30rpx;
          height: 30rpx;
          border-radius: 4rpx;
          background-color: #357af6;
          margin-right: 10rpx;
        }
      }
    }
  }
  .tip_box {
    margin-top: 80rpx;
    width: 100%;
    height: 320rpx;
    display: flex;
    .tip_ball {
      width: 50%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .ball_box {
        width: 280rpx;
        height: 280rpx;
        border-radius: 100%;
        align-items: center;
        background: linear-gradient(to bottom, #27C236, #047092);
        justify-content: center;
        display: flex;
        .ball_content {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          font-size: 30rpx;
          .num_box {
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
            font-size: 24rpx;
          }
        }
      }
    }
    .tip_content {
      width: 50%;
      height: 100%;
      .legend_title4 {
        font-size: 34rpx;
        font-weight: 700;
        margin-bottom: 20rpx;
      }
      .tip_content_box {
        display: flex;
        width: 100%;
        height: 240rpx;
        .green_line {
          width: 8rpx;
          height: 100%;
          border-radius: 8rpx;
          background-color: #21B547;
        }
        .content_bg_box {
          background: linear-gradient(90deg, #189D61 0%, #73737300 100%);
          width: calc(100% - 8rpx);
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: space-around;
          flex-direction: column;
          .con_item {
            font-size: 32rpx;
            width: 100%;
            padding-left: 20rpx;
          }
        }
      }
    }
  }
  .seven_day_title {
    font-size: 34rpx;
    font-weight: 700;
    margin: 80rpx 0 40rpx 0;
  }
  .seven_day {
    width: 100%;
    height: 400rpx;
  }
  .seven_legend {
    display: flex;
    align-items: center;
    margin-top: 20rpx;
    margin-bottom: 80rpx;
    .seven_item {
      padding: 10rpx 20rpx;
      background-color: #196B21;
      border-radius: 8rpx;
      display: flex;
      font-size: 24rpx;
      align-items: center;
      margin-right: 40rpx;
      .color_box {
        width: 30rpx;
        height: 30rpx;
        border-radius: 4rpx;
        background-color: #af53de;
        margin-right: 10rpx;
      }
    }
  }
  .emission_index {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 36rpx;
    margin: 40rpx 0;
  
  }
  .liquid_box {
    margin-top: 80rpx;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .li_box {
      width: 30%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
  }
  </style>
  